<template>
	<div>
		<el-dialog title="退料详情" width="80%" @open="open" class="icon-dialog" :visible.sync="show" :before-close="closeForm" append-to-body>
      <div>
        <el-button type="primary" size="small" icon="el-icon-check" @click="saveReturn()" :disabled="header.status === 'audit' || header.status === 'save'">&nbsp;保&nbsp;存&nbsp;</el-button>
        <el-button type="primary" size="small" icon="el-icon-s-promotion"  @click="audit()" :disabled="header.status === 'audit' || header.status === 'unAudit'">&nbsp;审&nbsp;核&nbsp;</el-button>
        <el-button type="primary" size="small" icon="el-icon-s-sort"  @click="unAudit()" :disabled="header.status === 'save' || header.status === 'unAudit'">&nbsp;反&nbsp;审&nbsp;</el-button>
      </div>
      <el-form>
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('field.ReturnMaterial_billNo')">{{header.billNo}} </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('field.ReturnMaterial_taskBillNo')">{{header.taskBillNo}} </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('field.ReturnMaterial_status')">
              <el-tag :type="header.status === 'save'? '': (header.status === 'audit'? 'success': 'danger')">{{ header.status === 'save'? '保存': (header.status === 'audit'? '审核': '创建') }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('field.ReturnMaterial_createTime')">{{header.createTime}} </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('field.ReturnMaterial_stocker')">{{header.stocker}} </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('field.ReturnMaterial_count')">{{header.count}} </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="dataList" height="calc(100vh - 250px)">
        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
        <el-table-column label="物料编码" width="120" prop="materialNo"></el-table-column>
        <el-table-column label="物料名称" width="120" prop="materialName"></el-table-column>
        <el-table-column label="物料规格" width="120" prop="specification"></el-table-column>
        <el-table-column label="单位" width="60" prop="unit"></el-table-column>
        <el-table-column label="数量" width="60" prop="count">
          <template slot-scope="scope">
            <el-input   size="small" v-model="scope.row.count"  style="width: 80px;" :min="0"   :disabled="header.status === 'audit' || header.status === 'save'" />
          </template>
        </el-table-column>
        <el-table-column label="仓库" width="100" prop="stockNo">
          <template slot-scope="scope">
            <el-select  v-model="scope.row.stockNo" clearable  placeholder="请选择仓库"  size="small" :disabled="header.status === 'audit' || header.status === 'save'">
              <el-option v-for="item in stockList" :key="item.stockNo" :label="item.stockName" :value="item.stockNo"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="批次" width="100" prop="flot">
          <template slot-scope="scope" >
            <el-input  v-if="scope.row.isFlot == true" size="small" v-model="scope.row.flot"  style="width: 80px;"  :disabled="header.status === 'audit' || header.status === 'save'" />
          </template>
        </el-table-column>
        <el-table-column label="生产日期" width="120" prop="produceDate">
          <template slot-scope="scope" v-if="scope.row.isProduce == true">
            <el-date-picker :disabled="header.status === 'audit' || header.status === 'save'" v-model="scope.row.produceDate" value-format="yyyy-MM-dd" size="small" clearable placeholder="选择生产日期">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="有效期至" width="120" prop="expiryDate">
          <template slot-scope="scope" v-if="scope.row.isProduce == true && scope.row.expiryDate" >
            <el-date-picker :disabled="header.status === 'audit' || header.status === 'save'" v-model="scope.row.expiryDate" value-format="yyyy-MM-dd" size="small" clearable placeholder="选择日期">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="160" v-if="header.status === 'unAudit'">
          <template slot-scope="scope">
            <div v-if="scope.row.id">
              <el-button size="small" type="text" style="color:#FF0000;" @click="deleteDetail(scope.row)" ><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
		</el-dialog>
	</div>
</template>
<script>
import { detail,
         saveReturn,
    deleteDetail,
        audit,
    unAudit,
      } from '@/api/app/returnmaterial'
import {list } from '@/api/app/stocklist'
export default {
	name:'returnMaterialdetail',
  inject:['reload'],
	props: {
		show: {
			type: Boolean,
			default: true
		},
		size: {
			type: String,
			default: 'mini'
		},
		info: {
			type: Object,
		},
	},
	data() {
		return {
			dataList:[],
      header:{},
      stockList:[]
		}
	},
	watch:{
		show(val){
			if(val){
			}
		}
	},
	methods: {
    deleteDetail(row){
      this.$confirm('是否确认删除',{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
      }).then(() =>{
        deleteDetail({id : row.id}).then(res => {
          this.open()
        })
      }).catch(()=>{

      })
    },
    unAudit(){
      unAudit({id:this.header.id}).then(res =>{
        if (res.data == true){
          this.$message.success("反审成功")
          this.open()
          this.reload()
        } else {
          this.$message.warning(data.msg)
          this.open()
        }
      })
    },
    audit(){
      audit({id:this.header.id}).then(res =>{
        if (res.data == true){
          this.$message.success("审核成功")
          this.open()
          this.reload()
        } else {
          this.$message.warning(data.msg)
          this.open()
        }
      })
    },
    /**
     * 保存退料单
     */
    saveReturn(){
      saveReturn({header : this.header,dataList : this.dataList}).then(res => {
        if(res.data == true){
          this.$message.success("保存成功")
          this.open()
        } else {
          this.$message.warning(data.msg)
          this.open()
        }
      })
    },
    getStockName(val){
      if (this.stockList && this.stockList.length > 0) {
        for (let i = 0; i < this.stockList.length; i++) {
          if (this.stockList[i].stockNo === val) {
            return this.stockList[i].stockName;
          }
        }
      }
    },
    getStockList(){
      list().then(res => {
        this.stockList = res.data
      })
    },
		open(){
			detail(this.info).then(res => {
				this.header = res.data.header
        this.dataList = res.data.dataList
			})
		},
		closeForm(){
			this.$emit('update:show', false)
		}
	},
  mounted() {
    this.getStockList()
  }
}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>
